<!-- 角色信息 -->
<!-- 角色信息 -->
<template>
  <div>
    <el-dialog v-model="dialogVisible" width="400" top="35vh" title="类型设置" draggable appendToBody destroyOnClose lockScroll :closeOnClickModal="false">
      <el-form ref="elFormRef" :model="formData" scrollToError statusIcon>
        <el-cascader v-model="listValue" style="width: 100%" :options="tencentList" :props="props" @change="handleChange"></el-cascader>
        <el-form-item labelWidth="0em">
          <div style="width: 100%; padding-top: 20px">
            <el-button style="width: 100%" type="success" :loading="submitLoading" :disabled="submitLoading" @click="submit">修改</el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
  import type { FormInstance } from 'element-plus';
  import { getCategoryTree, getDramaDetailById, updateDramaCategory } from '@/api/drama-management';
  type $ShowData = {
    dramaId: any;
  };
  const submitLoading = ref(false);
  const dialogVisible = ref(false);
  const elFormRef: Ref<FormInstance | null> = ref(null);
  const formData = reactive({
    dramaId: undefined,
    firstCategoryId: undefined,
    firstCategoryName: undefined,
    secondCategoryId: undefined,
    secondCategoryName: undefined,
    thirdCategoryId: undefined,
    thirdCategoryName: undefined,
  });
  const listValue = ref([]) as any;
  const props = {
    expandTrigger: 'hover' as const,
    value: 'tencentCategoryId', // 设置选项的值字段
    label: 'categoryName', // 设置选项的标签字段
    children: 'childrenList', // 设置子级字段
  };
  const tencentList = ref();
  const detail = ref();
  /**
   * 显示
   */
  function show(data: $ShowData) {
    formData.dramaId = undefined;
    formData.firstCategoryId = undefined;
    formData.firstCategoryName = undefined;
    formData.secondCategoryId = undefined;
    formData.secondCategoryName = undefined;
    formData.thirdCategoryId = undefined;
    formData.thirdCategoryName = undefined;
    formData.dramaId = data.dramaId;
    listValue.value = [];
    getDramaDetailById(data.dramaId).then((res) => {
      detail.value = res.data;
      if (detail.value?.firstCategoryId) {
        const arr = [detail.value.firstCategoryId, detail.value.secondCategoryId, detail.value.thirdCategoryId];
        listValue.value = arr;
      }
      console.log('listValue', listValue.value);
    });
    getCategoryTree().then((res) => {
      tencentList.value = res.data;
      dialogVisible.value = true;
    });
  }

  /**
   * 隐藏
   */
  function hide() {
    dialogVisible.value = false;
    formData.dramaId = undefined;
  }

  const handleChange = (value: any) => {
    console.log('value', value);
    const firstObj = tencentList.value.filter((option: { tencentCategoryId: any }) => option.tencentCategoryId === value[0]);
    const secondObj = firstObj[0].childrenList.filter((option: { tencentCategoryId: any }) => option.tencentCategoryId === value[1]);
    const third = secondObj[0].childrenList.filter((option: { tencentCategoryId: any }) => option.tencentCategoryId === value[2]);
    formData.firstCategoryName = firstObj[0].categoryName;
    formData.secondCategoryName = secondObj[0].categoryName;
    formData.thirdCategoryName = third[0].categoryName;
    formData.firstCategoryId = value[0];
    formData.secondCategoryId = value[1];
    formData.thirdCategoryId = value[2];
    console.log('listValue', listValue.value);
  };
  /** 提交 */
  async function submit() {
    try {
      submitLoading.value = true;
      await updateDramaCategory(formData);
      ElToast.success('操作成功');
      hide();
      submitLoading.value = false;
    } catch (error) {
      submitLoading.value = false;
      ElToast.error(error.msg || '提交失败，-BD003');
    }
  }

  defineExpose({ show, hide });
</script>
